<template>
	<view class="roc-select-multiple">
		<view @click="handleSelectShow()">
			<u-input v-model="checkLabel" disabled disabledColor="#ffffff"
				:placeholder="item.props.placeholder || '请选择'" :clearable="item.props.clearable || false" border="none">
			</u-input>
		</view>
		<uni-icons class="uni-icons" @click="handleClearable"
			v-if="(!item.props.clearable) && (!item.props.disabled) && value" type="clear" color="#e1e1e1" size="14">
		</uni-icons>
		<u-popup :show="selectShow" @close="selectCancel">
			<view class="bottons">
				<view class="" @click="selectCancel">
					取消
				</view>
				<view class="cor" @click="submit">
					确定
				</view>
			</view>
			<view style="padding: 20rpx;">
				<scroll-view style="max-height: 600rpx;" :scroll-top="0" scroll-y="true" class="scroll-Y"
					@scrolltolower="$emit('lower')">
					<u-checkbox-group shape="circle" placement="column" iconPlacement="right" size="44"
						:value="checkValue" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" labelSize="28" v-for="(item,index) in columns"
							:key="index" :label="item.label" :name="String(item.value)">
						</u-checkbox>
					</u-checkbox-group>

				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		apiapi
	} from '@/api/request.js';
	export default {
		name: 'roc-select-multiple',
		props: {
			item: {
				type: Object,
				default () {
					return {};
				}
			},
			value: {
				type: [String, Number, Array],
				default: ''
			}
		},
		data() {
			return {
				selectShow: false,
				columns: [],
				checkboxData: [],
				checkLabel: "",
				resultVal: [],
				checkValue: []
			};
		},
		async created(option) {
			if (this.item.options == undefined) {
				// 接口数据
				if (
					this.item.effect.fetch != '' &&
					this.item.effect.fetch.action != undefined &&
					this.item.effect.fetch.action != ''
				) {
					const {
						data: {
							data
						}
					} = await apiapi(this.item.effect.fetch.action, 'POST', {});
					this.columns = data;
				} else {
					this.$u.toast(`${this.item.title}, 配置错误`);
				}
			} else {
				// 静态数据
				this.columns = this.item.options;
			}
			console.log("===================", this.value)
			this.checkboxChange(this.value, true)
			this.resultVal = this.value.split(",")
		},
		methods: {
			checkboxChange(n, isedit = false) {
				if (typeof n == "string") {
					this.checkValue = n.split(",");
				} else {
					this.checkValue = n.map(item => {
						return String(item)
					})
				}

				this.checkboxData = [];
				console.log(this.checkValue)
				//根据选中value拿到选中对象
				this.checkValue.forEach(identity => {
					this.columns.forEach(item => {
						if (item.value == identity) {
							this.checkboxData.push(item)
						}
					})
				})
				//处理页面显示的值
				if (isedit) {
					this.checkLabel = ""
					this.checkboxData.forEach(item => {
						this.checkLabel += item.label + ","
					})
					//删除显示值最后一个逗号
					this.checkLabel = this.checkLabel.slice(0, this.checkLabel.length - 1)
				}
				console.log("checkboxData", this.checkboxData)
			},
			submit() {
				//页面显示的值
				this.checkLabel = "";
				//传给后台的值
				this.resultVal = []
				this.checkboxData.forEach(item => {
					this.checkLabel += item.label + ","
					this.resultVal.push(String(item.value))
				})
				console.log("11111111111", this.checkboxData)
				//删除显示值最后一个逗号
				this.checkLabel = this.checkLabel.slice(0, this.checkLabel.length - 1)
				console.log(this.resultVal)
				this.$emit('input', this.resultVal);
				this.selectShow = false;
			},
			// 处理清空选中值
			handleClearable() {
				this.$emit('input', '')
			},
			// 打开选择器 & 禁用功能
			handleSelectShow() {
				if (this.item.props.disabled) return;
				this.selectShow = true;
			},
			// 关闭选择器
			selectCancel() {
				this.selectShow = false;
			},
			// 选择器确定选中的值
			selectConfirm(e) {
				this.$emit('input', e.value[0].value);
				this.selectShow = false;
			}
		}
	};
</script>

<style lang="scss">
	.roc-select-multiple {
		position: relative;
		width: 100%;

		.uni-icons {
			position: absolute;
			right: 0;
			top: 50%;
			z-index: 9;
			transform: translateY(-50%);
		}

		.u-checkbox {
			height: 88rpx;

			uni-text {
				font-size: 88rpx;
			}
		}

		.bottons {
			height: 42px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				padding: 0 15px;
			}

			:first-child {
				color: #909193;
			}

			:last-child {
				color: #3c9cff;
			}
		}
	}
</style>
